<template>
	<view class="page">
		<GoodsList :list="items" :checkable="false">
		</GoodsList>

		<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus" @loadmore="scrolltolower" />

		<view class="btn-fixed">
			<u-button text="导出" type="primary" shape="circle" color="#276AEE" @tap.stop.prevent="handleExport"></u-button>
		</view>

		<ExportModal ref="exportModal"></ExportModal>
	</view>
</template>

<script>
	import GoodsList from './components/GoodsList.vue'
	import ExportModal from './components/ExportModal.vue'

	export default {
		components: { GoodsList, ExportModal },
		data() {
			return {
				openId: '',
				shopOpenId: '',
				items: [],
				pageNo: 1,
				pageSize: 10,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		async onShow() {
			let { openid } = uni.getStorageSync('openId')
			this.openId = openid

			this.loadMoreStatus = 'loading'
			await this.getWaterGoodsInfo()

			if (this.shopOpenId) {
				this.getDBData()
			}
		},
		onPullDownRefresh() {
			this.refresherrefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.scrolltolower()
		},
		methods: {
			handleExport() {
				this.$refs.exportModal.show(this.shopOpenId)
			},
			async getWaterGoodsInfo() {
				let params = {
					openId: this.openId
				}
				await this.$api.queryWaterGoodsInfo(params).then((res) => {
					if (res.success) {
						this.shopOpenId = res.result.shopOpenId
					} else {
						this.loadMoreStatus = 'nomore'
					}
				}).catch(() => {
					this.loadMoreStatus = 'nomore'
				})
			},
			async getDBData(type = 'refresh') {
				let params = {
					openId: this.shopOpenId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					sellBuy: 3
				}
				await this.$api.getMsSoldShopOrderList(params).then((res) => {
					if (res.success) {
						let tData = res.result.records
						if (type === 'refresh') {
							this.items = tData
						}
						if (type === 'add') {
							this.items.push(...tData)
						}
						// console.log('列表：', this.items);
						this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
					} else {
						this.loadMoreStatus = 'nomore'
					}
				}).catch(() => {
					this.loadMoreStatus = 'nomore'
				})
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
			refresherrefresh() {
				this.items = []
				this.pageNo = 1
				this.loadMoreStatus = 'loading'
				setTimeout(async () => {
					await this.getDBData('refresh')
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>

<style lang="scss" scoped>
	.page {
		padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
	}

	.btn-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 50rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		box-shadow: 0rpx -2rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		box-sizing: border-box;
	}
</style>